<template>
  <div>
    <el-descriptions border :column="2">
      <el-descriptions-item label="退换货单号" label-align="center" :width="80">
        {{ detailForm.returnOrderCode }}
      </el-descriptions-item>
      <el-descriptions-item label="退款类型" label-align="center" :width="80">
        <el-tag type="primary">
          {{
            returnType.find((item) => item.value == detailForm.returnType)
              .label || ""
          }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="退换货数量" label-align="center" :width="80">
        {{ detailForm.quantity }}
      </el-descriptions-item>
      <el-descriptions-item
        label="退换货总金额/差价(元)"
        label-align="center"
        :width="80"
      >
        {{
          detailForm.returnAmount
            ? (detailForm.returnAmount / 100).toFixed(2)
            : ""
        }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" label-align="center">
        {{ detailForm.remark }}
      </el-descriptions-item>
    </el-descriptions>

    <ProductionInfo
      title="退换货商品信息"
      :productionInfo="detailForm.oldOrderItem"
      :quantity="detailForm.quantity"
      class="my-3"
    />

    <ProductionInfo
      title="新换商品信息"
      :productionInfo="detailForm.newOrderItem"
      v-if="detailForm.returnType == 3"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { returnType } from "../returnType";
import ProductionInfo from "./ProductionInfo.vue";
import { handleApiResponse } from "@/utils/request.js";
import { GetReturnOrderDetail } from "../../../../../wailsjs/go/api/OrderApi";

onMounted(() => {
  getDetail();
});

const props = defineProps({
  detailId: {
    type: Number,
    default: 0,
  },
});

const detailForm = ref({
  returnOrderCode: "", //  退换货单号
  returnAmount: 0,
  remark: "",
  returnType: 1,
  quantity: 0,
  oldOrderItem: {},
  newOrderItem: {},
});
async function getDetail() {
  handleApiResponse(() => GetReturnOrderDetail({ id: props.detailId })).then(
    (res) => {
      if (res.code == 0) {
        detailForm.value = res.data || {};
        if (
          !detailForm.value.oldOrderItem ||
          !detailForm.value.oldOrderItem.codes
        ) {
          detailForm.value.oldOrderItem.codes = [];
        }
        if (
          !detailForm.value.newOrderItem ||
          !detailForm.value.newOrderItem.codes
        ) {
          detailForm.value.newOrderItem.codes = [];
        }
      }
    }
  );
  //   selectReturnOrderDetail(props.detailId).then((res) => {
  //     if (res.code == 0) {
  //       detailForm.value = res.data || {};
  //       if (
  //         !detailForm.value.oldOrderItem ||
  //         !detailForm.value.oldOrderItem.codes
  //       ) {
  //         detailForm.value.oldOrderItem.codes = [];
  //       }
  //       if (
  //         !detailForm.value.newOrderItem ||
  //         !detailForm.value.newOrderItem.codes
  //       ) {
  //         detailForm.value.newOrderItem.codes = [];
  //       }
  //       console.log(detailForm.value);
  //     }
  //   });
}
</script>

<style scoped lang="scss">
.production :deep(.el-descriptions__header) {
  margin-bottom: 5px;
}
</style>